import { useRef } from 'react';
import Red from "./CircalVisualization/Right"
import Black from "./CircalVisualization/Left"

export default function CircularVisualization() {
  const containerRef = useRef<HTMLDivElement>(null!);

  return (
    <div className="bg-blue-100 p-2 rounded-md h-full flex flex-col gap-y-2">
      <div className="h-1/8 flex items-center justify-center bg-blue-800">
        <h2 className="font-bold text-white text-sm">
          与课题1对接口，读取地质参数
        </h2>
      </div>

      <div className="flex w-full h-full bg-amber-50">
        <div className="flex-1 w-1/2 h-full">
          <Black />
        </div>
        <div className="flex-1 w-1/2 h-full flex flex-col">
          <div className="h-1/8 text-left text-red-500 text-xl font-bold flex items-center justify-center">
            同步推拼<br />
            <span className="text-green-500 text-2xl">✓</span>
          </div>
          <div className="flex-1" ref={containerRef}>
            <Red containerRef={containerRef} />
          </div>
        </div>
      </div>
    </div>
  );
}